<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- <script src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=rt&cb=show"></script> -->
	<script src="jquery.js" charset="utf-8"></script>
	<style type="text/css">
		*{
			margin: 0;padding: 0;
		}
		#oul{
			list-style: none;
		}
		.olii{
			/*background: lightblue;*/
			font-size: 20px;
			padding-top: 5px;
		}
		.olii:hover{
			background: lightblue;
		}
		#div{
			width:580px;
			margin: 100px auto;
			text-align: center;
		}
		#txt{
			width: 580px;height: 50px;font-size:25px;
			border-radius: 5px;outline: none;
		}
		#oul{
			text-align: left;
		}

	</style>
	<script type="text/javascript">
		$(function(){
			$('#txt').on('input',function(){
				$.ajax({
					url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
					data:{wd:$('#txt').val()},
					dataType:'jsonp',
					jsonp:'cb',
					success(json){
						// alert(json.s)
						$('#oul').html('');
						json.s.forEach(item=>{
							$(`<li class='olii'>${item}</li>`).appendTo('#oul');
						});
					},
					error(){
						alert('错了')
					}
				});
			});	
		})


	</script>

</head>

<body>
	<div id='div'>
	<input type="text" id="txt">
	<ul id="oul"></ul>
	</div>
</body>
</html>